<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/fakeFileInputs.css"/>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/ajaxfileupload.js"></script>
        <script type="text/javascript">
            var background=chrome.extension.getBackgroundPage();
            function ajaxFileUpload()
            {

                var src=document.getElementById("fileToUpload").value;
                jpg=src.split(".")[1];
                if(jpg=="jpg"|| jpg=="JPG" || jpg=="jpeg"|| jpg=="JPEG"){
                    $("#uploadLoader").show();
                    $('#uploader').hide();
                    jsontemp=JSON.parse(localStorage.authtokenObj);
                    json=
                        {
                        "key":jsontemp.token.key,
                        "secret":jsontemp.token.secret,
                        "function":4
                    }
                    window.localStorage.uploading=1;
                    $.ajaxFileUpload
                    ({
                        url:background.netlogStaticData.baseURL+background.netlogStaticData.dofunctionURL,
                        secureuri:false,
                        fileElementId:'fileToUpload',
                        dataType: 'json',
                        data:json,
                        success: function (response){
                            $("#uploader").hide();
                            $("#addphoto").show();
                            $("#uploadLoader").hide();
                            //   $("#imguploaded").attr('src', src)
                            window.localStorage.removeItem("uploading")
                            console.log(response);
                        },
                        error: function (e)
                        {
                            $("#loader").hide();
                            console.log("keko yad"+e);
                        }
                    })
                }else{
                    alert("Choose JPG Image");
                }
                return false;

            }

            $(document).ready(function(){
                $("input[type=file]").change(function(){$(this).parents(".uploader").find(".filename").val($(this).val());});
                $("input[type=file]").each(function(){
                    if($(this).val()==""){$(this).parents(".uploader").find(".filename").val("No file selected...");}
                });
                $("#anotherimg").click(function(){
                    $(".filename").val("No file selected...");
                    $("#uploader").show();
                    $("#addphoto").hide();
                });
             
            });
        </script>
    </head>

    <body style="background:#EFEFEF;font-family:Arial, Helvetica, sans-serif;">
    <header>
        <a href="http://www.netlog.com" class="f" target="_blanck">
            <img src="images/logo.png" alt="Netlog" />
        </a>
        <div class="clearfix"></div>
    </header>
    <article class="content upload">
        <h2 style="text-align: left;">
            <img src="images/upload-header.png" alt="" />
            	Upload Photo
        </h2>
        <div class="upload-area-page" style="height: 170px;">

            <div class="uploader dark" id="uploader">
                <form name="form" action="" method="POST" enctype="multipart/form-data">
                    <input type="text" class="filename" readonly="readonly"/>
                    <input type="button" class="button" value="Browse..."/>
                    <input id="fileToUpload" type="file" size="45" name="fileToUpload" >
                    <div class="upload-hint" style="text-align: left;">Only JPG files are allowed.</div>
                    <p class="ta-c">
                        <button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>
                    </p>
                </form>
            </div>
            <div  style="display:  none" id="addphoto">
                <div class="uploaded-txt ta-c f">
            	Photo has been added successfully
                </div>
                <p class="ta-c">
                    <input type="submit"  id="anotherimg" value="add another photo">
                </p>
            </div>
        </div>
        <div class="overlay"  id="uploadLoader" style="display:  none"  >
            <img src="images/ajax-loader.gif" class="f"   />
            <p>Uploading........</p>
        </div>
        <div class="clearfix"></div>
    </article>

    <!--        <div class="main-container">

                 header
                <header>
                    <a href="#" class="f">
                        <img src="images/logo.png" alt="Netlog" />
                    </a>
                    <a href="#" class="logout f-r">Log out</a>
                    <div class="clearfix"></div>
                </header>



            </div>-->
</body>
</html>
